<!-- PictureInPicture.html -->
  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Picture-in-Picture Demo</title>
  <style>
  body {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}
video {
  width: 60%;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 20px;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>
  </head>
  <body>
  <!-- 使用时需要自行替换视频链接 -->
  <video id="video" src="https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4" controls></video>
  <button id="togglePipButton">开启画中画</button>

  <script>
  const video = document.getElementById("video");
const togglePipButton = document.getElementById("togglePipButton");
// 如果浏览器不支持画中画功能或被禁用，则隐藏按钮
togglePipButton.hidden =
  !document.pictureInPictureEnabled || video.disablePictureInPicture;
// 监听按钮点击事件，切换画中画模式
togglePipButton.addEventListener("click", async () => {
  try {
    if (document.pictureInPictureElement) {
      // 如果当前处于画中画模式，退出画中画
      await document.exitPictureInPicture();
    } else {
      // 否则，进入画中画模式
      await video.requestPictureInPicture();
    }
  } catch (err) {
    // 如果画中画模式切换失败，打印错误信息
    console.error("Picture-in-Picture mode failed:", err);
  }
});
// 监听进入画中画事件
video.addEventListener("enterpictureinpicture", () => {
  // 更新按钮文本为“退出画中画”
  togglePipButton.textContent = "退出画中画";
});
// 监听退出画中画事件
video.addEventListener("leavepictureinpicture", () => {
  // 更新按钮文本为“开启画中画”
  togglePipButton.textContent = "开启画中画";
});
</script>
  </body>
  </html>